<template>
  <div class="discuss-item">
    <img :src="userSrc"/>
    <div class="content">{{discussContent}}</div>
    <p class="begin">发布日期：{{beginDate}}</p>
    <p class="end">截止日期：{{endDate}}</p>
    <p class="re">回复</p>
  </div>
</template>

<script>
const responseData = {
  userSrc: '../../static/userlogo.jpg',
  discussContent: '各位大佬，电子综合系统设计求组队！！！',
  beginDate: '2017-5-1',
  endDate: '2017-5-8'
}

export default {
  name: 'discussItem',
  data: function () {
    return {
      userSrc: responseData.userSrc,
      discussContent: responseData.discussContent,
      beginDate: responseData.beginDate,
      endDate: responseData.endDate
    }
  }
}
</script>

<style scoped>
.discuss-item {
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  background-color: white;
  box-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.5);
  border-radius: 0.2rem;
  text-align: left;
}
.discuss-item img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.content {
  display: inline-block;
  width: 60%;
  margin: 0.3rem;
  vertical-align: top;
  font-size: 0.45rem;
}
.begin {
  color: #5677fc;
  font-size: 0.4rem;
}
.end {
  color: #e51c23;
  font-size: 0.4rem;
  display: inline;
}
.re {
  color: #5677fc;
  font-size: 0.4rem;
  display: inline-block;
  margin-left: 3.5rem;
}
</style>
